<template>
  <div>
    <div id="overall">
      <el-row class="login">
        <el-col :span="10">
          <div class="left">
            <div class="box"><img src="../assets/image/logo.png" /></div>
            <div>欢迎！</div>
            <div>智学无忧-后台管理系统</div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="rigth">
            <div>登录</div>
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              status-icon
              :rules="rules"
              class="demo-ruleForm"
              size="large"
            >
              <el-form-item prop="username " style="width: 100%">
                <el-input
                  :prefix-icon="User"
                  v-model="ruleForm.username"
                  type="text"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item prop="password " style="width: 100%">
                <el-input
                  :prefix-icon="Unlock"
                  v-model="ruleForm.password"
                  type="password"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  style="width: 150px"
                  type="primary"
                  @click="submitForm(ruleFormRef)"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
            <div>作者：<span>廖扬克</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { User, Unlock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import Cookies from "js-cookie";
import { Login } from "../api/index";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();

// 用户名
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空！"));
  } else {
    callback();
  }
};

// 密码
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("用户不能为空！"));
  } else {
    callback();
  }
};
const rules = reactive({
  username: [{ validator: validatePass2, trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }],
});

//参数
const ruleForm = reactive({
  username: "", //用户
  password: "", //密码
});

//登录按钮
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate( async (valid) => {
    if (valid) {
      const { data: token, errno, errmsg } = await Login(ruleForm);
      if (errno != 200) return ElMessage.error(errmsg);
      ElMessage.success('登录'+errmsg)
      let now = new Date();
      now.setTime(now.getTime() + 1000 * 60 * 30);
      Cookies.set("token", token, { expires: now });
      router.replace("/");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
#overall {
  height: 100vh;
  justify-content: center;
  display: flex;
  align-items: center;
  background: url("../assets/image/login-back.png") no-repeat;
  background-size: 100% 100%;
  // display: flex;
  .login {
    width: 1000px;
    height: 60%;
    display: flex;
    .left {
      min-height: 100%;
      background-color: #005de9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .box {
        border-radius: 50%;
        box-shadow: 1px 3px 20px 6px white;
      }
      img {
        width: 120px;
      }
      div {
        color: white;
        font-size: 20px;
        margin-bottom: 15px;
      }
    }
    .rigth {
      min-height: 100%;
      background-color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      div {
        margin: 6px;
        font-size: 18px;
      }
      .demo-ruleForm {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .el-form-item {
        margin-bottom: 20px;
      }
    }
  }
}
/deep/ .el-form {
  width: 75% !important;
}
</style>